<!--  -->
<template>
  <div class="home-category">
    <div class="home-category-content" v-if="(productDatas && categoryDatas && brandDatas)">
      <!-- 分类和品牌的组件 -->
      <CategroyBrand :categoryDatas="categoryDatas" :brandDatas="brandDatas" />
      <!-- list列表 -->
      <!-- 父传子 -->
      <!-- 父组件以v-bind绑定属性的形式绑定到子组件上,传递数据 -->
      <CategoryList :productDatas="productDatas" />
      <div style="height: 3000px; background: skyblue">额外的div</div>
    </div>
    <!-- 商品列表 -->
    <div class="loading" v-else>
      <img src="@/assets/images/loading.gif" alt="" />
    </div>
  </div>

</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { HomeCategoryListApi, HomeCategoryApi } from '@/api/home'
import CategroyBrand from "./CategoryBrand.vue";
import CategoryList from "@/components/CategoryList.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { CategroyBrand, CategoryList },
  data() {
    //这里存放数据
    return {
      productDatas: null,
      categoryDatas: null,
      brandDatas: null
      // productDatas: [
      //   {
      //     goods_id: 1140,
      //     goods_name:
      //       "摩飞（Morphyrichards）榨汁机 便携式充电迷你无线果汁机料理机随行杯MR9800 蓝色",
      //     shop_price: "219.00",
      //     goods_thumb:
      //       "https://img14.360buyimg.com/n1/s300x300_jfs/t1/107620/38/15906/368883/5eaf7085E3cc8d8ef/b2dac719f339e972.jpg",
      //     goods_label: [
      //       {
      //         id: 1,
      //         label_id: "1",
      //         label_name: "双十二",
      //         formated_label_image:
      //           "https://x.dscmall.cn/storage/data/goods/label/双十二2.png",
      //       },
      //       {
      //         id: 2,
      //         label_id: "2",
      //         goods_id: "1140",
      //         label_name: "商创精选",
      //         formated_label_image:
      //           "https://x.dscmall.cn/storage/data/goods/label/商创精选2.png",
      //       },
      //       {
      //         id: 3,
      //         label_id: "3",
      //         goods_id: "1140",
      //         label_name: "放心购",
      //         formated_label_image:
      //           "https://x.dscmall.cn/storage/data/goods/label/放心购2.png",
      //       },
      //     ],
      //     // 自营还是进店
      //     self_run: 0,
      //     // 销售量
      //     sales_volume: 2,
      //   },
      //   {
      //     goods_id: 913,
      //     goods_name:
      //       "猫人Xiaomi/小米 小米电视4A 55英寸 4k超高清智能网络电视机 50 60",
      //     shop_price: "2399.00",
      //     goods_thumb:
      //       "https://x.dscmall.cn/storage/images/201809/thumb_img/_thumb_P_1536532330615.jpg",
      //     goods_label: [],
      //     self_run: "",
      //     sales_volume: 10,
      //   },
      //   {
      //     goods_id: 1133,
      //     goods_name:
      //       "九阳（Joyoung）豆浆机1.3L免滤双层杯体304级不锈钢家用多功能搅拌机料理机DJ13B-D0",
      //     shop_price: "339.00",
      //     goods_thumb:
      //       "https://img14.360buyimg.com/n1/s300x300_jfs/t1/118091/1/15926/85759/5f44db1dEda332635/d6959ca23e523096.jpg",
      //     goods_label: [],
      //     self_run: "1",
      //     sales_volume: 10,
      //   },
      // ],
    };
  },
  //计算属性 类似于data概念
  props: ['cat_id'],
  computed: {},
  //监控data中的数据变化
  watch: {
    cat_id(newValue) {
      console.log(newValue);
      this.cat_id = newValue;
      this.getAllCategory();
    }
  },
  //方法集合
  methods: {
    getAllCategory() {
      // 初始化数据
      this.categoryDatas = null;
      this.brandDatas = null;
      this.productDatas = null;
      // 数据请求重新请求后台
      HomeCategoryApi({ cat_id: this.cat_id }).then(res => {
        console.log(res);
        this.categoryDatas = res.data.data.category;
        this.brandDatas = res.data.data.brand;
      })
      HomeCategoryListApi({ cat_id: this.cat_id }).then(res => {
        // console.log(res.data);
        // 将接受的数据设置到data中
        this.productDatas = res.data.data;
      })
    }
  },
  beforeCreate() { }, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getAllCategory();
  },
  beforeMount() { }, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { },
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，激活
  deactivated() { }, //如果页面有keep-alive缓存功能，非激活
};
</script>
<style>

</style>